import React, { Component } from 'react'

//数据渲染


export default class Hello extends Component {
  state = {
    money: 2000,
    xml: '<div><h3>xml数据类型<h3><div/>',
    flag: true,
    todos: [{
      id: 1,
      task: '任务一'
    }, {
      id: 2,
      task: '任务二'
    }]
  }

  changeFlag = () => {
    this.setState({
      flag: !this.state.flag
    })
  }

  renderTodos = () => {
    return this.state.todos.map(item => <li key={item.id}>{item.task}</li>)
  }

  render () {
    const { money, xml, flag, todos } = this.state
    if (!flag) return <div>加载中.....</div>
    return (
      <div>
        1.数据显示
        <p>{money}</p><hr />
        <div dangerouslySetInnerHTML={{ __html: xml }} ></div>
        2.条件展示<hr />
        <button onClick={this.changeFlag}>changeFlag</button>
        <p>{flag ? '真' : '假'}</p>
        <p>{flag ? <span>真</span> : <span>假</span>}</p>
        3.列表渲染
        {/* 数组map的返回值是一个新数组 */}
        <ul>
          {this.renderTodos()}
          {/* {todos.map(item => <li key={item.id}>{item.task}</li>)} */}
        </ul>
      </div>
    )
  }
}
